<html >
	<head>
	
		<title>gwt-diagrams example</title>

		<script language='javascript' src='pl.balon.gwt.diagramsexample.GwtDiagramsExample.nocache.js'></script>

		<style>
			.example-connector {
				border: 1px solid #2A8EBF;
				padding: 1px 3px;
				background-color: #2A8EBF;
				color: white;
				text-align: center;
			}

			.selected-connector {
				background-color: #FF0000;
			}
			
			.gwt-TabBarItem {
				margin-right: 3px;
				margin-bottom: 2px;
				padding: 1px 5px;
				background-color: #C6CAB7;
				color: white;
				font-size: 10pt;
				cursor: pointer;
			}

			.gwt-TabBarItem-selected {
				background-color: #2A8EBF;
				padding: 1px 5px 4px;
				margin-bottom: 0px;
			}
			
			.gwt-TabPanelBottom {
				border: 2px solid #2A8EBF;
			}
			
			.gwt-diagrams-line {
				background-color:#2A8EBF;
			}
			
			.gwt-diagrams-canvas {
				color: #2A8EBF;
			}
			
			.gwt-diagrams-vml-curve {
				color: #2A8EBF;
			}

			.gwt-diagrams-vml-group {
				color: #2A8EBF;
			}
			
			body {
				font-family:Helvetica,Arial,sans-serif;
			}
			
			.gwt-diagrams-sources-panel {
				background-color: #2A8EBF;
			}
			
			.gwt-diagrams-source-link a,
			.gwt-diagrams-source-link a:link, 
			.gwt-diagrams-source-link a:visited,
			.gwt-diagrams-source-link a:active
			{
				color: white;
				font-size: 10pt;
			}
			
			.gwt-diagrams-source-link a:hover {
				color: #6aceff;
			}

			.gwt-diagrams-source-link {
				padding-left: 3px;
			}
			
			.toolbox-node {
				border: 1px solid #C6CAB7;
				padding: 1px 3px;
				margin: 3px;
				background-color: #C6CAB7;
				color: white;
				text-align: center;
				width: 20px;
				font-size: 10pt;
			}

			.all {
				border-color: #2A8EBF;
			}

			.left {
				border-left-color: #2A8EBF;
			}
			.right {
				border-right-color: #2A8EBF;
			}
			.top {
				border-top-color: #2A8EBF;
			}
			.bottom {
				border-bottom-color: #2A8EBF;
			}

			.toolbox {
				border-bottom: 1px solid #2A8EBF;
				width: 100%;
			}
			
			.helpPanel {
				border-bottom: 1px solid #2A8EBF;
				width: 100%;
			}

			.helpEntry {
				font-size: 10px;
				padding: 3px;
			}

			.builder {
				width: 100%;
			}
			
			.style-option {
				font-size: 10pt;
				display: block;
				vertical-align: middle;
				margin-top: 3px;
			}
			
			.style-option input, .style-option label {
				vertical-align: middle;
			}
			
			.toolbox-node-proxy {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
		<table border="0">
			<tr><td style="vertical-align: top;">
				<div id="tabs"></div>
			</td><td style="vertical-align: top; padding-left: 20px;">
				<h3 style="margin-top: 0px;">gwt-diagrams demo</h3>
				<p>Project homepage: <a href="http://code.google.com/p/gwt-diagrams/">http://code.google.com/p/gwt-diagrams/</a>.</p>
				<p>Demo source code <a href="http://code.google.com/p/gwt-diagrams/downloads/list">download</a>.</p>
				<p>
					Demo utilizes <a href="http://code.google.com/p/gwt-dnd/">gwt-dnd</a> library,
					so as to add drag and drop functionality. But it is not necessary to use it,
					and gwt-diagrams do not depends on gwt-dnd. 
					
				</p>
			</td></tr>
		</table>
	</body>
	
</html>
